.basic_layout {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
.basic_flex_wrap {
  display: flex;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 4px 8px;
  box-sizing: border-box;
  .search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
  }
  .flex_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    .title {
      font-weight: bold;
      font-size: 15px;
    }
  }
}
.container {
  &:extend(.basic_layout all);
  overflow-y: auto;
  margin: 10px 0;
  padding-right: 8px;
  box-sizing: border-box;
  .timely_fact {
    &:extend(.basic_layout all);
    .Flex_wrap {
      &:extend(.basic_flex_wrap all);
    }
    .chart_container {
      .chart_wrap {
        flex: 1;
        row-gap: 16px;
        display: flex;
        flex-direction: column;
        .tips {
          .pay {
            color: #333333;
          }
          .num {
            font-size: 36px;
            font-weight: bold;
          }
          .yesterday {
            color: #909090;
          }
        }

        .timely_fact_chart {
          width: 100%;
          height: 300px;
        }
      }
      .Grid_Box {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        column-gap: 10%;
        row-gap: 16px;
        .grid_item {
          width: 45%;
          border: 1px solid #909090;
          height: 189.125px;
          padding: 16px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .icon_wrap {
            display: flex;
            justify-content: space-between;
            color: #909090;
            font-size: 18px;
            .title {
            }
          }
          .num {
            font-size: 36px;
            color: #000000;
          }
          .yesterday {
            font-size: 18px;
            color: #909090;
          }
        }
      }
    }
  }

  .transform_board,
  .custom_board {
    &:extend(.basic_layout all);
    .Flex_wrap {
      &:extend(.basic_flex_wrap all);
    }

    .title {
      font-size: 15px;
      font-weight: bold;
      margin-left: 16px;
    }
  }
  .transform_board {
    .Grid_Wrap {
      display: flex;
      column-gap: 16px;
      align-items: center;
      .Grid_Box {
        flex: 6;
        display: flex;
        flex-wrap: wrap;
        column-gap: calc(20% / 3);
        .grid_item {
          width: 20%;
          border: 1px solid #909090;
          height: 200px;
          padding: 16px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .icon_wrap {
            display: flex;
            justify-content: space-between;
            color: #909090;
            font-size: 18px;
            .title {
            }
          }
          .num {
            font-size: 36px;
            color: #000000;
          }
          .yesterday {
            font-size: 18px;
            color: #909090;
          }
        }
      }
      .funnel {
        flex: 4;
      }
    }
  }

  .custom_board {
    .Grid_Box {
      display: flex;
      flex-wrap: wrap;
      column-gap: calc((100% / 7) / 5);
      .grid_item {
        width: calc(100% / 7);
        border: 1px solid #909090;
        height: 200px;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .icon_wrap {
          display: flex;
          justify-content: space-between;
          color: #909090;
          font-size: 18px;
          .title {
          }
        }
        .num {
          font-size: 36px;
          color: #000000;
        }
        .yesterday {
          font-size: 18px;
          color: #909090;
        }
      }
    }
  }
}
.chart_box {
  width: 100%;
  height: 200px;
}
.line_chart_wrap {
  width: 50%;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  .search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
    .flex_item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .active_custom_chart {
    width: 100%;
    height: 300px;
  }
}

.Table {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      column-gap: 16px;
      .flex_item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 8px;

        .title {
          font-weight: bold;
          font-size: 15px;
        }
      }
    }
  }
}

.pie_chart_wrap {
  display: flex;
  column-gap: 16px;
  .left {
    width: 60%;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    .title {
      color: #909090;
      display: flex;
      align-items: center;
      column-gap: 8px;
    }
    .pie_chart_container {
      width: 100%;
      display: flex;
      row-gap: 16px;
      .pie_chart {
        width: 100%;
        height: 450px;
      }
    }
  }
  .right {
    width: 40%;
    display: flex;
    flex-direction: column;
    row-gap: 32px;

    .title {
      color: #909090;
      display: flex;
      align-items: center;
      column-gap: 8px;
    }
    .data {
      display: flex;
      align-items: center;
      column-gap: 64px;
      font-size: 15px;
      .this_week,
      .this_month {
        display: flex;
        flex-direction: column;
        row-gap: 32px;
      }
    }
  }
}
.active {
  border-color: #40a9ff !important;
  color: #40a9ff !important;
}
.s-00ff00 {
  color: #00ff00 !important;
}
.s-ff0000 {
  color: #ff0000 !important;
}
